<template>
	<view class="content">
		<view class="button_container"><button @click="connect_tooth" class="button_style" size="mini" type="primary">连接蓝牙设备</button></view>
		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';

export default {
	data() {
		return {
			title: 'Hello',
			canvaColumn: null,
			echarts: {
				categories: [],
				series: [{ name: '电流值', data: [] }]
			}
		};
	},
	onLoad() {
		this.showColumn('canvasColumn', this.echarts);
		setTimeout(() => {
			this.dataCreate();
		}, 2000);
	},
	methods: {
		showColumn(canvasId, chartData) {
			const colors = ['#facc14', '#f04864', '#8543e0', '#90ed7d'];
			this.canvaColumn = new uCharts({
				$this: this,
				canvasId: canvasId,
				type: 'line',
				colors: colors,
				fontSize: 11,
				padding: [15, 15, 0, 15],
				legend: {
					show: true,
					padding: 5,
					lineHeight: 11,
					margin: 0
				},
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: 1,
				categories: chartData.categories,
				series: chartData.series,
				animation: false,
				xAxis: {
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					dashLength: 8
				},
				yAxis: {
					gridType: 'dash',
					gridColor: '#CCCCCC',
					dashLength: 8
				},
				width: 360,
				height: 240,
				extra: {
					line: {
						type: 'straight'
					}
				}
			});
		},
		connect_tooth() {
			console.log(getApp().globalData.connect_save);
		},
		dataCreate() {
			let echarts = [];
			setInterval(() => {
				echarts.push({
					categorie: new Date()
						.getTime()
						.toString()
						.substr(9),
					value: (Math.random() * 100).toFixed(2)
				});
				if (echarts.length >= 15) {
					echarts = echarts.slice(1);
				}
				this.echarts = {
					categories: echarts.map(val => val.categorie),
					series: [{ name: '电流值', data: echarts.map(val => val.value) }]
				};
				// this.showColumn('canvasColumn', this.echarts);
				this.canvaColumn.updateData(this.echarts);
			}, 500);
		}
	},
	components: {}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.button_container {
	display: flex;
	align-items: center;
	height: 100upx;
	line-height: 100upx;
	width: 100%;
}
.button_style {
	width: 60%;
}
.charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}
</style>